<!DOCTYPE html>
<html>

<head>
    <title>课程管理系统 - 添加课程</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
        }

        h1 {
            color: #333;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            box-sizing: border-box;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <h1>添加课程</h1>

    <input type="text" id="courseName" placeholder="课程名称">
    <input type="text" id="courseTime" placeholder="课程学分">
    <input type="text" id="courseLocation" placeholder="课程学时">

    <button onclick="createCourse()">创建课程</button>

    <script>
        function createCourse() {
            var courseName = document.getElementById('courseName').value;
            var courseTime = document.getElementById('courseTime').value;
            var courseLocation = document.getElementById('courseLocation').value;

            var data = {
                course_name: courseName,
                course_time: courseTime,
                course_location: courseLocation
            };

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8080/createCourse', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    document.getElementById('courseName').value = '';
                    document.getElementById('courseTime').value = '';
                    document.getElementById('courseLocation').value = '';
                    window.location.href = 'kc';
                } else {
                    console.error('课程创建失败:', xhr.statusText);
                }
            };
            xhr.send(JSON.stringify(data));
        }

        function getCourses() {
            // AJAX请求获取课程列表的代码
        }
    </script>
</body>

</html>